<template>
	<view class="user-init-container">


		<view class="form-content">
			<view class="form-section form-item">
				<view class="form-label">身份证号码</view>
				<view class="phone_code_single">
					<input class="phone_code_single_cinput" adjust-position="false" auto-blur="true"
						@blur="codeNumBlurFun" @input="codeNumInputFun" :focus="focus" v-model="code" type="idcard"
						maxlength="18" />
					<view class="phone_code_single_codeinput">
						<view v-for="(item, index) in 18" :key="index" @click="codefocusFun(index)"
							:style="(index == code.length ? 'background-color:#afacac;' : 'color: #313131;background-color:#eee')">
							{{ code[index] ? code[index] : '' }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="submit-section">
			<view class="submit-btn" :class="{ disabled }" @click="confirmInfo">
				<text class="submit-text">确认无误，下一步</text>
			</view>
		</view>
	</view>
</template>

<script>
import SelectRegion from '@/components/select-region/select-region'
import { isMobile } from '@/utils/verify'
import * as AddressApi from '@/api/address'
export default {
	data() {
		return {
			// 按钮禁用
			disabled: false,
			focus: true,   // 焦点
			statusBarHeight: 0,
			code: '',
		}
	},
	onLoad(options) {
		this.getSystemInfo()
	},
	methods: {
		/**
		 * DESC: 输入框输入事件 
		 * */
		codeNumInputFun(e) {
			let val = e.detail.value
			this.code = val
			if (val.length == 18) this.disabled = false
			else this.disabled = true
		},
		/**
		 * DESC: 输入框失去焦点事件 
		 * */
		codeNumBlurFun(e) {
			let val = e.detail.value
			this.focus = false
			if (val.length == 18) this.disabled = false
			else this.disabled = true
		},
		/**
		 * DESC: 输入框点击事件
		 * @param {Number} index 当前点击框索引
		 * */
		codefocusFun(index) {
			this.focus = true
		},
		getSystemInfo() {
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 0
		},
		confirmInfo() {
			if (this.disabled) {
				return;
			}
			const code = this.code;
			setTimeout(() => {
				this.$navTo('pages/userInit/info/index', { code })
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.user-init-container {
	min-height: 100vh;
	background: #F5F5F5;
	display: flex;
	flex-direction: column;
}

.status-bar {
	background: #FFFFFF;
}

.init-navbar {
	height: 88rpx;
	background: #FFFFFF;
	border-bottom: 1px solid #E5E5E5;
}

.init-navbar .navbar-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	padding: 0 32rpx;
}

.nav-left {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-size: 48rpx;
	color: #333333;
	font-weight: bold;
}

.nav-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.nav-right {
	display: flex;
	align-items: center;
}

.nav-action-btn {
	width: 60rpx;
	height: 60rpx;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 16rpx;
}

.action-dots,
.action-location {
	font-size: 24rpx;
	color: #666666;
}

.form-content {
	padding: 32rpx;
}

.form-section {
	background: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
}

.form-item {
	padding: 48rpx 32rpx;
	border-bottom: 1px solid #F0F0F0;
	justify-content: space-between;
	align-items: center;
	height: 500rpx;
}

.form-item:last-child {
	border-bottom: none;
}

.form-label {
	font-size: 55rpx;
	color: #333333;
	font-weight: 400;
}

.form-value {
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
}

.submit-section {
	padding: 32rpx 64rpx 60rpx;

}

.submit-btn {
	width: 100%;
	height: 96rpx;
	background: #4ECDC4;
	border-radius: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(78, 205, 196, 0.3);

	// 禁用按钮
	&.disabled {
		background: #dfdfdf;
	}
}

.submit-text {
	font-size: 32rpx;
	color: #FFFFFF;
	font-weight: 500;
}

.phone {
	background-color: #FFF;
	width: 100vw;
	height: 100vh;

	&_code {
		padding: 30rpx;

		&_label {
			font-size: 30rpx;
			color: #999;
		}

		&_count {
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;

			&_new {
				color: #e64340;
				font-size: 38rpx;
				font-weight: bold;
			}

			&_down {
				border: 1rpx solid #eee;
				border-radius: 10rpx;
				color: #999;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 20rpx;

				text {
					margin-left: 10rpx;
				}
			}
		}

		&_single {
			margin-top: 30rpx;

			&_cinput {
				position: fixed;
				left: -100rpx;
				width: 50rpx;
				height: 50rpx;
			}

			&_codeinput {
				margin: auto;
				width: 650rpx;
				height: 100rpx;
				display: flex;
				flex-wrap: wrap;
			}

			&_codeinput>view {
				margin-top: 18rpx;
				margin-left: 5rpx;
				width: 86rpx;
				height: 86rpx;
				line-height: 86rpx;
				font-size: 60rpx;
				font-weight: bold;
				color: #313131;
				text-align: center;
				border-radius: 10rpx;
			}

			&_codeinput>view:nth-child(1) {
				margin-left: 0rpx;
			}
		}
	}
}
</style>
